import React, { Component } from 'react';
import { List,Scroller,Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
require('isomorphic-fetch');
import './index.scss';

class Detail extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: [{text:'',key: ++guid }]
        };
    }

    getData(){
        fetch('http://localhost:3000/expe')
        .then((res) => {
            return res.json();
        }).then((expe) => {
            this.setState({
                dataSource:expe
            })
        });
    }
    componentWillMount(){
        this.getData()
    }

    fetch() {
        this.setState({ dataSource: this.state.dataSource });
    }

    render() {
        return (
            <div className="yo-flex">
                <Header title="经历页" left={false} />
                <List
                    ref="list"
                    extraClass=" yo-scrolller-fullscreen flex"
                    dataSource={this.state.dataSource}
                    renderItem={(item, i) => [<div className="yo-card" key={i} style={{paddingBottom:"10px"}}>
                            <div className="extra">
                                <img className="img-cover" src={item.img}/>
                            </div>
                            <div className="ft">
                                <h3 className="hd">{item.title}</h3>
                            </div>
                            <div className="bd">
                                <p className="desc">{item.content}</p>
                            </div>
                        </div>]}
                        useLoadMore={true}
                        onLoad={() => {
                        setTimeout(() => {
                            this.fetch();
                            this.refs.list.stopLoading(true);
                        }, 500);
                    }}
                />
                <Footer/>
            </div>
        )
    }
}

let guid = -1;

export default Detail;
